<template>
  <div>
    <dv-scroll-board :config="config" class="table" style="height:40vh" />
  </div>
</template>

<script>
// import moment from 'moment'
import { sysQuery } from '../../api/dataApi'
export default {
  name: '',
  data() {
    return {
      config: null,
      dataList: [],
    }
  },
  mounted() {
    this.getData()
  },

  watch: {
    dataList(newData) {
      this.config = {
        header: ['响应时间(分)', '确认时间', '产线', '设备名称', '报警类别'],
        headerHeight: 22,
        data: newData,
        index: false,
        columnWidth: [200, 200, 130, 200, 100],
        align: ['left'],
        headerBGC: ' ',
        // headerBGC: '#06144f',
        // oddRowBGC: '#06144f',
        oddRowBGC: ' ',
        // evenRowBGC: '#15235c',
        evenRowBGC: 'rgba(52,99,171,0.15)',
        waitTime: '5000',
        rowNum: 6,
      }
    },
  },
  props: {
    cx: {
      type: String,
      default: '',
    },
  },
  methods: {
    getData() {
      const that = this
      const header = {}
      header['report.tableid'] = 'bne_device_management_ad_right'
      header['wc_code'] = this.cx
      const params = {
        _params: JSON.stringify(header),
        _conditions: JSON.stringify({
          wc_code: 'like_anywhere',
        }),
        pageIndex: -1,
        // sortField: 'id',
        // sortOrder: 'desc',
      }
      sysQuery(params)
        .then((res) => {
          if (res.code == 0 && res.data && res.data.length > 0) {
            this.qThree(res.data)
          }
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员！')
        })
    },
    qThree(reportData) {
      const _reportData = []
      reportData.forEach((reportItem) => {
        const _m = []
        if (reportItem.progress == '20') {
          _m.push(
            `<span style="color:#f1d90b">${
              reportItem.responsetime ? reportItem.responsetime : ''
            } </span>`
          )
          _m.push(
            `<span style="color:#f1d90b">${
              reportItem.confirmtime ? reportItem.confirmtime : ''
            } </span>`
          )
          _m.push(
            `<span style="color:#f1d90b">${
              reportItem.wc_name ? reportItem.wc_name : ''
            } </span>`
          )
          _m.push(
            `<span style="color:#f1d90b">${
              reportItem.device_prod_name ? reportItem.device_prod_name : ''
            } </span>`
          )
          _m.push(
            `<span style="color:#f1d90b">${
              reportItem.reasonname ? reportItem.reasonname : '-'
            } </span>`
          )
        } else if (reportItem.progress == '30') {
          _m.push(
            `<span style="color:#47D95B">${
              reportItem.responsetime ? reportItem.responsetime : ''
            } </span>`
          )
          _m.push(
            `<span style="color:#47D95B">${
              reportItem.confirmtime ? reportItem.confirmtime : ''
            } </span>`
          )
          _m.push(
            `<span style="color:#47D95B">${
              reportItem.wc_name ? reportItem.wc_name : ''
            } </span>`
          )
          _m.push(
            `<span style="color:#47D95B">${
              reportItem.device_prod_name ? reportItem.device_prod_name : ''
            } </span>`
          )
          _m.push(
            `<span style="color:#47D95B">${
              reportItem.reasonname ? reportItem.reasonname : '-'
            } </span>`
          )
        } else {
          _m.push(reportItem.responsetime ? reportItem.responsetime : '-')
          _m.push(reportItem.confirmtime ? reportItem.confirmtime : '-')
          _m.push(reportItem.wc_name ? reportItem.wc_name : '-')
          _m.push(
            reportItem.device_prod_name ? reportItem.device_prod_name : '-'
          )
          _m.push(reportItem.reasonname ? reportItem.reasonname : '')
        }
        _reportData.push(_m)
      })
      this.dataList = _reportData
    },
  },
}
</script>

<style lang="less" scoped>
.tit {
  .px2font(17);
  .px2vh(padding-top, 15);
  letter-spacing: 2px;
  color: #fff;
  text-align: center;
}
.table-list {
  position: relative;
}
.circle {
  width: 1rem;
  height: 1rem;
  border-radius: 20px;
  display: inline-block;
  margin-right: 5px;
}

.table {
  .px2vw(padding-left, 10);
  .px2vw(padding-right, 10);
  // background-color: rgba(8, 18, 67, 0.7);
}
</style>
